<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useCascaderAreaData } from '@vant/area-data';
import RequestUtils from "@/utils/request.js";
import router from "@/router";
import { areaList } from "@vant/area-data";
const address = ref(null);
let unit = ref({
  address: "",
});
const options = useCascaderAreaData();
let show = ref(false);
let fieldValue = ref("");
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  fieldValue.value = selectedOptions.map(option => option.text).join(",");
  unit.address = fieldValue.value;
  console.log("unit.address", unit.address);
};
// 保存地址的回调函数
const onSave = (selectedAddress) => {
  address.value = selectedAddress;
  console.log("选中的地址:", address.value);
  // 这里可以将选中的地址保存到某个地方或者进行其他操作
};
const route = useRoute();
</script>

<template>
  <div class="content">
    <van-address-edit
          :area-list="areaList"
          :address-info="address"
          show-delete
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
    />
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="show = true"
      style=" font-size: 17px;"
    />
    <van-popup v-model:show="show" round position="bottom" aria-hidden="false">
      <van-cascader
        v-model="cascaderValue"
        title="请选择"
        :options="options"
        @close="show = false"
        @finish="onFinish"
        tabindex="-1"
      />
    </van-popup>
  </div>
</template>

<style scoped lang="less">
</style>